<template>
  <div class="CommonSwitch">
    <div class="van-cell" :class="{ 'van-cell--required': required }">
      <div :style="{ width: labelWidth }">{{ label }}</div>
      <div>
        <span class="value-wrap">
          <van-switch size="20px" :checked="currentValue" :disabled="isView" @change="e => currentValue = e.detail"></van-switch>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    isView: {
      type: Boolean,
      default: false,
    },
    labelWidth: {
      type: String,
      default: '90px',
    },
    required: {
      type: Boolean,
    },
  },
  data () {
    return {
      currentValue: this.value,
    }
  },
  watch: {
    value: {
      immediate: true,
      handler () {
        this.currentValue = this.value
      },
    },
    currentValue: {
      deep: true,
      handler () {
        this.$emit('input', this.currentValue)
      },
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";
.CommonSwitch {
}
</style>
